<template>
    <div class="chat-index">
        <el-row :gutter="0" class="chat-row">
            <el-col :span="8" class="chat-col">
                <div class="friend-list">
                    <ul class="list-ul friend-ul">
                        <li>
                            <el-input v-model="searchTxt" placeholder="请输入内容" size="mini"></el-input>
                        </li>
                        <li v-for="(bean,idx) in friendList" :key="idx" @click="friendClick(idx)"
                            :class="{active:selectIndex==idx}">
                            <img src="../../assets/user-head.png" class="user-head"/>
                            <span class="offline" v-if="bean.status!=1"></span>
                            <div class="friend-right">
                                <span class="user-name">
                                    {{bean.name}}
                                </span>
                                <span class="icon right">
                                    <i v-if="bean.sex==='女'" class="iconfont nv icon-nv"/>
                                    <i v-else class="iconfont nan icon-nan2"/>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="16" class="chat-col">
                <div class="chat-content" v-if="selectIndex>=0" v-loading="loading">
                    <div class="center-win">
                        <template v-if="friendList[selectIndex].head">
                            <img :src="friendList[selectIndex].head" class="user-head">
                        </template>
                        <template v-else>
                            <img src="../../assets/user-head.png" class="user-head">
                        </template>
                        <div class="user-item"><b>用户编号：</b>{{friendList[selectIndex].id}}</div>
                        <div class="user-item"><b>用户名：</b>{{friendList[selectIndex].name}}</div>
                        <div class="user-item"><b>性别：</b>{{friendList[selectIndex].sex}}</div>
                        <div class="user-item"><b>联系电话：</b>{{friendList[selectIndex].phone}}</div>
                        <el-button class="exit-btn" size="small" :disabled="disabled" @click="sendMsg">
                            发送消息
                        </el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Util from '../../components/Util';

    export default {
        name: 'FriendList',
        components: {},
        data() {
            return {
                searchTxt: '',
                selectIndex: -1,
                friendList: [],
                disabled: false,
                socket: null,
                loading: false,
                allList: [],
            }
        },
        watch: {
            searchTxt: {
                handler() {
                    let list = Util.Search(this.allList, 'name', this.searchTxt);
                    this.friendList = list;
                }
            }
        },
        methods: {
            loadFriendList() {
                this.$request(this.$api.listOrg, {}, (list) => {
                    list.forEach(item => {
                        item.status = 2;
                    })
                    this.allList = list;
                    this.friendList = list;
                })
            },
            sendMsg() {
                this.disabled = true;
                let param = {userId: this.$store.state.userInfo.userId, friendId: this.friendList[this.selectIndex].id};
                this.$request(this.$api.addFriend, param, () => {
                    this.$router.push({
                        name: 'ChatIndex',
                        params: {
                            id: this.friendList[this.selectIndex].id
                        }
                    });
                    this.$event.trigger(this.$event.names.OpenChat, {})
                    this.disabled = false;
                }, () => {
                    this.disabled = false
                })
            },
            friendClick(idx) {
                this.loading = true;
                this.selectIndex = idx;
                setTimeout(() => {
                    this.loading = false;
                }, 200)
            },
            addOnline(id) {
                let have = false;
                for (let i = 0; i < this.friendList.length; i++) {
                    if (this.friendList[i].id === id) {
                        this.friendList[i].status = 1;
                        have = true;
                        break;
                    }
                }
            },
            offline(name) {
                for (let i = 0; i < this.friendList.length; i++) {
                    if (this.friendList[i].name === name) {
                        // this.selectIndex = -1;
                        // this.onlineList.splice(i, 1);
                        this.friendList[i].status = 2;  //离线
                        break;
                    }
                }
            },
            //事件监听
            onlineEvent(data) {
                this.addOnline(data.from);
            },
            offLineEvent(data) {
                this.offline(data.from);
            },
            onlineListEvent(data) {
                let list = JSON.parse(data.data);
                list.forEach(item => {
                    this.addOnline(item);
                })
            },
            clearEvent() {
                this.$event.off("Online", this.onlineEvent)
                this.$event.off("Offline", this.offLineEvent)
                this.$event.off("OnlineList", this.onlineListEvent)
            },
            addEvent() {
                this.$event.on("Online", this.onlineEvent)
                this.$event.on("Offline", this.offLineEvent)
                this.$event.on("OnlineList", this.onlineListEvent)
                this.$event.on("Receive", (data) => {
                    console.info("receive", data);
                })
            },
        },
        mounted() {
            // let socket = this.$store.state.socket;
            // this.socket = socket;
            // this.clearEvent();
            // this.addEvent();
            this.loadFriendList();
        }
    }
</script>
<style lang="less" scoped>
    @import "../../assets/css/style.less";

    .center-win {
        position: absolute;
        /*border: 1px solid #ccc;*/
        width: 300px;
        height: 300px;
        top: 150px;
        left: 50%;
        margin-left: -150px;

        .user-head {
            height: 100px;
            width: 100px;
            margin: 10px 0 5px 0;
        }

        .user-item {
            margin: 5px 0 10px 0;
            text-align: left;
        }

        .exit-btn {
            width: 150px;
        }
    }
</style>

